﻿@page "/docs/components/tooltip"

<Seo Canonical="/docs/components/tooltip" Title="Blazorise Tooltip Component" Description="The Tooltip component is useful for conveying information when a user hovers over an element." />

<DocsPageTitle>
    Tooltip component
</DocsPageTitle>

<DocsPageParagraph>
    The <Code Tag>Tooltip</Code> component is useful for conveying information when a user hovers over an element. When activated,
    tooltips display a text label identifying an element, such as a description of its function.
</DocsPageParagraph>

<DocsPageParagraph>
    <Alert Color="Color.Info" Visible>
        <AlertDescription>
            Starting with <Strong>v0.9.4</Strong>, Tooltip component is powered by <Blazorise.Link To="https://atomiks.github.io/tippyjs/" Target="Target.Blank">Tippy.js.</Blazorise.Link>
        </AlertDescription>
    </Alert>
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicTooltipExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicTooltipExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Positions">
        You can use one of the following modifiers to change positions of the tooltip:
        <UnorderedList>
            <UnorderedListItem>
                Top
            </UnorderedListItem>
            <UnorderedListItem>
                Bottom
            </UnorderedListItem>
            <UnorderedListItem>
                Left
            </UnorderedListItem>
            <UnorderedListItem>
                Right
            </UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TooltipPositionsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TooltipPositionsExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="Text" Type="string" Default="null">
        Content displayed in the tooltip.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Placement" Type="TooltipPlacement" Default="Top">
        Position of the tooltip relative to it’s component.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Multiline" Type="bool" Default="false">
        Force the multiline display.
    </DocsAttributesItem>
    <DocsAttributesItem Name="AlwaysActive" Type="bool" Default="false">
        Always show tooltip, instead of just when hovering over the element.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Inline" Type="bool" Default="false">
        Force inline block instead of trying to detect the element block.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Fade" Type="bool" Default="false">
        Controls the fade effect.
    </DocsAttributesItem>
    <DocsAttributesItem Name="FadeDuration" Type="int" Default="300">
        Duration in ms of the fade transition animation.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Trigger" Type="TooltipTrigger" Default="MouseEnterFocus">
        Determines the events that cause the tooltip to show.
    </DocsAttributesItem>
</DocsAttributes>